<template>
  <div>
    <el-card
      ><CategorySelect @getCategoryId="getCategoryId"></CategorySelect
    ></el-card>
    <el-card style="margin-top: 30px">
      <div v-show="isShow">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="addAttr"
          :disabled="!cateGoryId.cateGory3Id"
          >添加属性</el-button
        >
        <!-- 属性列表 -->
        <el-table :data="attrList" border style="width: 100%; margin-top: 10px">
          <!--第一列 序号 -->
          <el-table-column label="序号" width="180" align="center" type="index">
          </el-table-column>
          <!-- 第二列 属性值名称 -->
          <el-table-column prop="attrName" label="属性值名称" width="180">
          </el-table-column>
          <!-- 第三列 属性值 -->
          <el-table-column prop="address" label="属性值列表">
            <template slot-scope="{ row }">
              <el-tag
                type="success"
                v-for="val in row.attrValueList"
                :key="val.id"
                style="margin-left: 5px; margin-top: 5px"
              >
                {{ val.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="warning"
                size="mini"
                icon="el-icon-edit"
                @click="editAttr(row)"
                >编辑</el-button
              >
              <el-button type="danger" size="mini" icon="el-icon-delete"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 添加修改属性值 -->
      <div v-show="!isShow">
        <el-form ref="form" label-width="80px" :inline="true">
          <el-form-item label="属性名">
            <el-input
              placeholder="请输入属性名"
              v-model="attrInfo.attrName"
            ></el-input>
          </el-form-item>
        </el-form>

        <el-button type="primary" icon="el-icon-plus" @click="addAttrValue"
          >添加属性值</el-button
        >
        <el-button @click="isShow = true">取消</el-button>

        <el-table
          border
          style="width: 100%; margin: 10px 0 10px"
          :data="attrInfo.attrValueList"
        >
          <el-table-column
            prop="prop"
            label="序号"
            type="index"
            align="center"
            width="100"
          >
          </el-table-column>
          <el-table-column label="属性值名称" prop="valueName" width="width">
            <template slot-scope="{ row, $index }">
              <el-input
                v-model="row.valueName"
                placeholder="请输入属性值"
                size="mini"
                v-show="row.flag"
                @blur="hiddenIpt(row)"
                :ref="$index"
              >
              </el-input>

              <span v-show="!row.flag" @click="toLook(row, $index)">{{
                row.valueName
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{ row, $index }">
              <el-popconfirm
                :title="`确定删除${row.valueName}`"
                :ref="$index"
                @onConfirm="deleteAttrValue($index)"
              >
                <el-button
                  slot="reference"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                >
                  删除
                </el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>

        <el-button type="primary" @click="saveAttrValue">保存</el-button>
        <el-button @click="isShow = true">取消</el-button>
      </div>
    </el-card>
  </div>
</template>


<script>
import conleDeep from "lodash/cloneDeep";
export default {
  name: "Attr",
  components: {},
  data() {
    return {
      cateGoryId: {},
      attrList: [],
      isShow: true,
      value: "",

      //商品信息
      attrInfo: {
        attrName: "", //属性名
        attrValueList: [],
        categoryId: 0, //三级分类的id
        categoryLevel: 3, //因为服务器也需要区分几级id
      },
    };
  },
  methods: {
    //自定义事件  兄弟组件传id
    async getCategoryId(cateGoryId) {
      //整个对象一起传参会相互影响，所以要深拷贝
      this.cateGoryId = { ...cateGoryId };
      console.log(cateGoryId);
      if (cateGoryId.cateGory3Id) {
        let result = await this.$API.attr.reqAttrList(
          cateGoryId.cateGory1Id,
          cateGoryId.cateGory2Id,
          cateGoryId.cateGory3Id
        );
        if (result.code === 200) {
          this.attrList = result.data;
        }
        console.log(result);
      }
    },
    //添加属性
    addAttr() {
      this.isShow = false;
      this.attrInfo = {
        attrName: "", //属性名
        attrValueList: [],
        categoryId: 1, //三级分类的id
        categoryLevel: 3, //因为服务器也需要区分几级id
      };
    },
    //添加属性值
    addAttrValue(index) {
      this.attrInfo.attrValueList.push({
        attrId: this.attrInfo.id, //对于修改某一个属性的时候，可以在已有的属性值基础之上新增新的属性值（新增属性值的时候，需要把已有的属性的id带上）
        valueName: "",
        flag: true,
      });

      this.$nextTick(() => {
        //bug处暂时不处理   表单自动聚焦失效
        this.$refs[this.attrInfo.attrValueList.length - 1].focus;
      });
    },
    //编辑属性值
    editAttr(row) {
      this.isShow = false;
      //lodash深拷贝函数
      this.attrInfo = conleDeep(row);
      //编辑属性的时候要把每一个对象都添加上flag属性才能控制相互切换
      this.attrInfo.attrValueList.forEach((item) => {
        this.$set(item, "flag", false);
      });
    },
    //表单失去焦点
    hiddenIpt(row) {
      if (row.valueName.trim() === "") {
        this.$message("请输入有效值");
        return;
      }

      let isRepet = this.attrInfo.attrValueList.some((item) => {
        // 把item == row的那一项单独列出
        if (row != item) {
          return row.valueName == item.valueName;
        }
      });
      if (isRepet) {
        this.$message("属性值重复");
        return;
      }
      row.flag = false;
    },
    //点击span标签回调
    toLook(row, index) {
      row.flag = true;
      console.log(index);
      this.$nextTick(() => {
        console.log(this.$refs[2]);
        //bug处，暂时不处理  表单自动聚焦失效
        this.$refs[index].focus;
      });
    },

    //点击气泡框确认时触发
    deleteAttrValue(index) {
      //删除数组第一个元素
      this.attrInfo.attrValueList.splice(index, 1);
    },
    //保存按钮
    async saveAttrValue() {
      this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(
        (item) => {
          if (item.attrName != "") {
            delete item.flag;
            return true;
          }
        }
      );
      console.log(this.attrInfo);

      let result1 = await this.$API.attr.reqAddOrUpdateAttr(this.attrInfo);
      let result2 = await this.$API.attr.reqAttrList(
        this.cateGoryId.cateGory1Id,
        this.cateGoryId.cateGory2Id,
        this.cateGoryId.cateGory3Id
      );
      if (result2.code == 200) {
        this.attrList = result2.data;
        this.isShow = true;
        this.$message({ message: "保存成功", type: "success" });
      }
    },
  },
};
</script>


<style scoped>
</style>